function ElementProps(){
	this.idPropp = new InputText("");
	this.idPropp.setLabel("id");
	this.idPropp.setEnable(false);
	this.idPropp.setSize(6);
	
	this.textPropp = new InputText("");
	this.textPropp.setLabel("Text");
	this.textPropp.setSize(12);
	
	this.imgSrcPropp = new InputText("");
	this.imgSrcPropp.setLabel("src");
	this.imgSrcPropp.setSize(12);
	
	this.heightPropp = new NumericStepper(0);
	this.heightPropp.setLabel("Height");
	this.heightPropp.setStep(1);
	this.heightPropp.setMin(0);
	this.heightPropp.setMin(999);
	this.heightPropp.setSize(6);
	
	
	this.widthPropp = new NumericStepper(0);
	this.widthPropp.setLabel("Widt.");
	this.widthPropp.setStep(1);
	this.widthPropp.setMin(0);
	this.widthPropp.setMin(999);
	this.widthPropp.setSize(6);
	
	this.topPropp = new NumericStepper(0);
	this.topPropp.setLabel("Top");
	this.topPropp.setStep(1);
	this.topPropp.setMin(0);
	this.topPropp.setMin(999);
	this.topPropp.setSize(6);
	
	this.leftPropp = new NumericStepper(0);
	this.leftPropp.setLabel("Left");
	this.leftPropp.setStep(1);
	this.leftPropp.setMin(0);
	this.leftPropp.setMin(999);
	this.leftPropp.setSize(6);
	
	this.fontColorPropp = new InputText("");
	this.fontColorPropp.setLabel("Color");
	this.fontColorPropp.setSize(6);
	
	this.fontSizePropp = new NumericStepper(14);
	this.fontSizePropp.setLabel("F.Size");
	this.fontSizePropp.setStep(1);
	this.fontSizePropp.setMin(0);
	this.fontSizePropp.setMin(99);
	this.fontSizePropp.setSize(6);
	
	this.fillColorPropp = new InputText("");
	this.fillColorPropp.setLabel("Fill");
	this.fillColorPropp.setSize(6);
	
	this.borderColorPropp = new InputText("");
	this.borderColorPropp.setLabel("Border");
	this.borderColorPropp.setSize(6);
	
	this.borderSizePropp = new NumericStepper(0);
	this.borderSizePropp.setLabel("B.Size");
	this.borderSizePropp.setStep(1);
	this.borderSizePropp.setMin(0);
	this.borderSizePropp.setMin(99);
	this.borderSizePropp.setSize(6);
	
	this.dtaSetValuesPropp = new TextArea("");
	this.dtaSetValuesPropp.setLabel("Itens");
	
	//this.gridDtaSet =  new DataGrid();
	
	
	this.htmlX = $("<div>");
	this["_dta"] = this;
	
	this.htmlX.append(this.idPropp.htmlX).append(this.heightPropp.htmlX)
	.append(this.widthPropp.htmlX)
	.append(this.topPropp.htmlX).append(this.leftPropp.htmlX)
	.append(this.textPropp.htmlX).append(this.imgSrcPropp.htmlX)
	.append(this.fontColorPropp.htmlX).append(this.fontSizePropp.htmlX)
	.append(this.borderColorPropp.htmlX).append(this.borderSizePropp.htmlX)
	.append(this.fillColorPropp.htmlX).append(this.dtaSetValuesPropp.htmlX);
	/*
	this.namePropp.htmlX.change(function(){
	
	});
	*/
	this.heightPropp.htmlX.keyup(function(evt){
		var idTmp = propsElement.idPropp.getValue();
		var vlTmp =  parseInt(evt.target.value);
		var elementT = $("#el_"+idTmp);
		elementT.height(vlTmp);
		propsElement.setProp({"id":idTmp,"valor":vlTmp,"classeVisual":elementT[0].className,"attr":"height"});
	});
	this.widthPropp.htmlX.keyup(function(evt){
		var idTmp = propsElement.idPropp.getValue();
		var vlTmp =  parseInt(evt.target.value);
		var elementT = $("#el_"+idTmp); 
		elementT.width(vlTmp);
		propsElement.setProp({"id":idTmp,"valor":vlTmp,"classeVisual":elementT[0].className,"attr":"width"});
	});
	this.topPropp.htmlX.keyup(function(evt){
		var idTmp = propsElement.idPropp.getValue();
		var vlTmp =  parseInt(evt.target.value);		
		var elementT = $("#el_"+idTmp); 
		elementT.css("top",vlTmp+"px");
		propsElement.setProp({"id":idTmp,"valor":vlTmp,"classeVisual":elementT[0].className,"attr":"top"});
		
	});
	this.leftPropp.htmlX.keyup(function(evt){
		var idTmp = propsElement.idPropp.getValue().toLowerCase();
		var vlTmp =  parseInt(evt.target.value);
		var elementT = $("#el_"+idTmp); 
		elementT.css("left",vlTmp+"px");
		propsElement.setProp({"id":idTmp,"valor":vlTmp,"classeVisual":elementT[0].className,"attr":"left"});
	});
	this.textPropp.htmlX.keyup(function(evt){
		var idTmp = propsElement.idPropp.getValue();
		var vlTmp = evt.target.value; 
		var elementT = $("#el_"+idTmp); 
		elementT.find("label").text(vlTmp);
		propsElement.setProp({"id":idTmp,"valor":vlTmp,"classeVisual":elementT[0].className,"attr":"text"});		
	});
	this.fontColorPropp.htmlX.keyup(function(evt){
		var idTmp = propsElement.idPropp.getValue();
		var vlTmp = evt.target.value;		
		var elementT = $("#el_"+idTmp); 
		elementT.find("label").css("color",vlTmp);
		propsElement.setProp({"id":idTmp,"valor":vlTmp,"classeVisual":elementT[0].className,"attr":"fontColor"});	
	});
	this.fontSizePropp.htmlX.keyup(function(evt){
		var idTmp = propsElement.idPropp.getValue();
		var vlTmp =  parseInt(evt.target.value);
		var elementT = $("#el_"+idTmp); 
		elementT.find("label").css("fontSize",vlTmp+"px");
		propsElement.setProp({"id":idTmp,"valor":vlTmp,"classeVisual":elementT[0].className,"attr":"fontSize"});
	});
	this.borderColorPropp.htmlX.keyup(function(evt){
		var idTmp = propsElement.idPropp.getValue();
		var vlTmp = evt.target.value;		
		var elementT = $("#el_"+idTmp); 
		elementT.css("border-color", vlTmp);
		propsElement.setProp({"id":idTmp,"valor":vlTmp,"classeVisual":elementT[0].className,"attr":"borderColor"});
	});
	this.borderSizePropp.htmlX.keyup(function(evt){
		var idTmp = propsElement.idPropp.getValue().toLowerCase();
		var vlTmp =  parseInt(evt.target.value);
		var elementT = $("#el_"+idTmp); 
		elementT.css({"borderWidth":vlTmp+"px"});
		propsElement.setProp({"id":idTmp,"valor":vlTmp,"classeVisual":elementT[0].className,"attr":"borderSize"});
	});
	this.fillColorPropp.htmlX.keyup(function(evt){
		var idTmp = propsElement.idPropp.getValue();
		var vlTmp = evt.target.value;		
		var elementT = $("#el_"+idTmp); 
		elementT.css("background-color", vlTmp);
		propsElement.setProp({"id":idTmp,"valor":vlTmp,"classeVisual":elementT[0].className,"attr":"fillColor"});
	});
	this.imgSrcPropp.htmlX.keyup(function(evt){
		var idTmp = propsElement.idPropp.getValue();
		var vlTmp = evt.target.value;		
		var elementT = $("#el_"+idTmp); 
		elementT.find("img").attr("src", vlTmp);
		propsElement.setProp({"id":idTmp,"valor":vlTmp,"classeVisual":elementT[0].className,"attr":"imgSrc"});
	});
	

	
	this.imgSrcPropp.htmlX.hide();
	this.fillColorPropp.htmlX.hide();
	this.fontColorPropp.htmlX.hide();
	this.borderColorPropp.htmlX.hide();
	this.textPropp.htmlX.hide();
	this.fontSizePropp.htmlX.hide();
	this.borderSizePropp.htmlX.hide();
	this.dtaSetValuesPropp.htmlX.hide();

	this.widthPropp.htmlX.hide();
	this.leftPropp.htmlX.hide();
	this.topPropp.htmlX.hide();
	
	/*
	).append(this.heightPropp.htmlX)
	.append(this.widthPropp.htmlX)
	.append(this.topPropp.htmlX).append(this.leftPropp.htmlX)
	.append(this.textPropp.htmlX)
	.append(this.textExpPropp.htmlX).append(this.fontColorPropp.htmlX)
	.append(this.fontSizePropp.htmlX)
	.append(this.borderColorPropp.htmlX).append(this.borderSizePropp.htmlX)
	.append(this.fillColorPropp.htmlX).append(this.dtaSetValuesPropp.htmlX
	*/
};
ElementProps.prototype.setProp=function(props){
	var tipoS = "visual_elements";
	var compId = "id";
	var idEle = props.id;
	if(props.classeVisual.indexOf("eleImage") > -1){
		tipoS = "images";
	}else if(props.classeVisual.indexOf("eleTextField") > -1 || props.classeVisual.indexOf("eleText") > -1){
		tipoS = "texts";
	}else if(props.classeVisual.indexOf("designpagerband") > -1 ){
		compId = "band";
		//idEle = props.id.replace("el_","");
		tipoS="bands";
	}
	var tml = _jeport[tipoS][compId].length;
	for(var x=0; x<tml ; x++){
		if(_jeport[tipoS][compId][x]==idEle){
			_jeport[tipoS][props.attr][x] = props.valor;
			break;
		}
	}
	
	
}
ElementProps.prototype.setProps=function(props){
		props.top =  parseInt(props.top);
		props.left=  parseInt(props.left);
		this.idPropp.setValue(props.id);
		this.topPropp.setValue( props.top);
		this.leftPropp.setValue( props.left);
		this.widthPropp.setValue( parseInt(props.width));
		this.heightPropp.setValue( parseInt(props.height));
		this.fillColorPropp.setValue(props.fillColor);
		this.fontColorPropp.setValue(props.fontColor);
		this.borderColorPropp.setValue(props.borderColor);
		this.textPropp.setValue(props.text);
		this.fontSizePropp.setValue(props.fontSize.replace("px",""));
		this.borderSizePropp.setValue(props.borderSize.replace("px",""));
		this.imgSrcPropp.setValue(props.imgSrc);
		
		
		var elementT = $("#el_"+props.id); 
		if(elementT[0].className.indexOf("designpagerband")<0){
			propsElement.setProp({"id":props.id,"valor": props.left,"classeVisual":elementT[0].className,"attr":"left"});
			propsElement.setProp({"id":props.id,"valor": props.top,"classeVisual":elementT[0].className,"attr":"top"});
		}
};
ElementProps.prototype.fillProps=function(eleM){
	var idT = eleM.attr("id").replace("el_","");
	var imgSrc = "";
	var fontSize = "14";
	if(eleM.hasClass("eleTextField")||eleM.hasClass("eleText")){
		fontSize = eleM.find("label").css("fontSize");
		this.dtaSetValuesPropp.htmlX.hide();
		this.widthPropp.htmlX.show();
		this.leftPropp.htmlX.show();
		this.topPropp.htmlX.show();
		this.fillColorPropp.htmlX.show();
		this.fontColorPropp.htmlX.show();
		this.borderColorPropp.htmlX.show();
		this.fontSizePropp.htmlX.show();
		this.borderSizePropp.htmlX.show();
		this.textPropp.htmlX.show();		
	}else if(eleM.hasClass("designpagerband")){
		this.fillColorPropp.htmlX.hide();
		this.fontColorPropp.htmlX.hide();
		this.borderColorPropp.htmlX.hide();
		this.textPropp.htmlX.hide();
		this.fontSizePropp.htmlX.hide();
		this.borderSizePropp.htmlX.hide();
		this.dtaSetValuesPropp.htmlX.hide();		
		this.widthPropp.htmlX.hide();
		this.leftPropp.htmlX.hide();
		this.topPropp.htmlX.hide();
		
	}else{
		
		if(eleM.hasClass("eleImage")){
			this.imgSrcPropp.htmlX.show();
			imgSrc = eleM.find("img").attr("src");
		}else{
			this.imgSrcPropp.htmlX.hide();
		}
		this.textPropp.htmlX.hide();
		this.fontSizePropp.htmlX.hide();
		this.fontColorPropp.htmlX.hide();
		this.fillColorPropp.htmlX.show();
		this.borderColorPropp.htmlX.show();
		this.borderSizePropp.htmlX.show();
		this.widthPropp.htmlX.show();
		this.leftPropp.htmlX.show();
		this.topPropp.htmlX.show();
	}

	propsElement.setProps({
	"id":idT
	,"top":eleM.position().top
	,"left":eleM.position().left
	,"width":eleM.width()
	,"height":eleM.height()											
	,"fillColor":eleM.css("backgroundColor")
	,"fontColor":eleM.css("color")
	,"borderColor":eleM.css("borderTopColor")
	,"text":eleM.text()
	,"fontSize":fontSize	
	,"borderSize":eleM.css("borderTopWidth")
	,"imgSrc":imgSrc						
	});
};